import React from "react";
import {usePageEvent} from "remax/macro";
import {Card} from 'annar'
import {Icon} from  'annar'
import {Swiper, SwiperItem, Video, View} from "remax/wechat";

// import { ImageCard } from "../image-card";
import styles from './index.css'

export interface Props {
    videoList: any
}

export const VideoSwiper = (props: Props) => {
    const [triggered, setTrigger] = React.useState(false)
    const [videoList, setVideoList] = React.useState<any[]>(props.videoList)
    const [circular, setCircular] = React.useState(false)
    let data = {
        nextQueue: [], // 待播放列表
        prevQueue: [], // 已播放列表
        curQueue: [], // 当前播放列表
        circular: false, // 是否循环
        _last: 1, // 上一次显示
        _change: -1,
        _invalidUp: 0,
        _invalidDown: 0,

    }
    let _videoContexts: WechatMiniprogram.VideoContext[]

    // _videoListChanged()

    usePageEvent("onLoad",
        () => {
            _videoContexts = [
                wx.createVideoContext('video_0', this),
                wx.createVideoContext('video_1', this),
                wx.createVideoContext('video_2', this)
            ]
        })

    const [loop, setLoop] = React.useState(true);

    const animationFinish = (e: { detail: { current: any; }; }) => {
        const current = e.detail.current
        const diff = current - data._last
        let curQueue1 = data.curQueue
        data._last = current
        console.log(current)

        if (diff === 0) return

        const direction = (diff === -1 || diff === 2) ? 'up' : 'down'
        if (direction === 'up') {
            if (data._invalidDown === 0) {
                const change = (data._change + 1) % 3
                const add = data.nextQueue.shift()
                const remove = curQueue1[change]
                if (add) {
                    data.prevQueue.push(remove)
                    data.curQueue[change] = add
                    data._change = change
                } else {
                    data._invalidUp += 1
                }
            } else {
                data._invalidDown -= 1
            }


        }

        if (direction === 'down') {
            if (data._invalidUp === 0) {
                const change = data._change
                const remove = data.curQueue[change]
                const add = data.prevQueue.pop()

                if (add) {
                    data.curQueue[change] = add
                    data.nextQueue.unshift(remove)
                    data._change = (change - 1 + 3) % 3
                } else {
                    data._invalidDown += 1
                }
            } else {
                data._invalidUp -= 1
            }
        }

        let circular1 = true

        if (data.nextQueue.length === 0 && current !== 0) {
            circular1 = false
        }

        if (data.prevQueue.length === 0 && current !== 2) {
            circular1 = false
        }
        transition
        data.curQueue = curQueue1
        data.circular = circular1
        setCircular(circular1)
        console.log(e.detail.current)
    }


    const playCurrent = (current: number) => {
        _videoContexts.forEach((ctx, index) => {
            // @ts-ignore
            index !== current ? ctx.pause() : ctx.play()
        })
    }

    const _videoListChanged = (newVal: any[]) => {
        // @ts-ignore
        newVal.forEach(item => data.nextQueue.push(item))

        if (data.curQueue.length === 0) {
            data.curQueue = data.nextQueue.splice(0, 3)
        }
        playCurrent(1)

    }


    // const onRefresh = () => {
    //     // console.log("onRefresh")
    //     setTimeout(() => {
    //         setTrigger(false)
    //     }, 3000)
    // }

    // const onRestore = () => {
    //     // console.log("onRestore")
    // }

    const transition = (event:any) => {
        console.log(event)
        // if ()
    }



    return (
        <View className={styles.container}>
            <Swiper
                className={styles.video_swiper}
                circular={true}
                easing-function="default"
                vertical
                current={1}
                duration={1000}
                onTransition={transition}
                onAnimationFinish={animationFinish}
            >
                {/* curQueue 循环会导致video重新插入，objectFit 不可变更 */}
                {videoList.map(item => (

                    <SwiperItem itemId={String(item.key)}
                        //  key={item.id}
                    >
                        <Video
                            // id="video_{{index}}"
                            className={styles.video_item}
                            loop={loop}
                            enable-play-gesture={true}
                            enable-progress-gesture
                            show-center-play-btn={false}
                            controls={false}
                            src={item.url}
                            data-id={item.id}
                            object-fit="contain"
                            // data-index="{{index}}"
                            // bindplay="onPlay"
                            // bindpause="onPause"
                            // bindended="onEnded"
                            // binderror="onError"
                            // bindtimeupdate="onTimeUpdate"
                            // bindwaiting="onWaiting"
                            // bindprogress="onProgress"
                            // bindloadedmetadata="onLoadedMetaData"
                        />
                    </SwiperItem>
                ))}


            </Swiper>

        </View>)
}
